<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.3/css/swiper.min.css">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../css/buyhorse.css">
  <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" />
  <title>我要买马</title>
<body>
    <div class="layui-fluid">
      <div class="bacl">

      </div>
      <!-- 导航部分 -->
      <div class="nav">
        <img src="../img/whitelogo.jpg" alt="">
        <div class="nav-na">
          <span>首页</span>
          <span>我要买马</span>
          <span>交易流程</span>
          <span>平台服务</span>
          <span>个性需求</span>
          <span>合作伙伴</span>
          <span>关于我们</span>
        </div>
        <section class="nav-input">
          <i class="layui-icon layui-icon-search"></i>
          <input type="text" placeholder="搜索">
          <span>登录</span>
        </section>
      </div>
      <!-- 导航结束部分 -->
      <!-- 轮播图开始 -->
      <div class="broadcast">
        <div class="layui-carousel" id="broadcast">
          <div carousel-item>
            <div><img src="../img/sowingmap.jpg" alt=""></div>
            <div><img src="../img/sowingmap.jpg" alt=""></div>
            <div><img src="../img/sowingmap.jpg" alt=""></div>
            <div><img src="../img/sowingmap.jpg" alt=""></div>
            <div><img src="../img/sowingmap.jpg" alt=""></div>
          </div>
          <div class="broadcast-font">
            <h1>{{ broadcast.name }}</h1>
            <p>价格</p>
            <section class="broadcast-price">
              <span>￥</span>
              <span>{{ broadcast.price }}</span>
              <span>万</span>
            </section>
            <section>
              <span class="broadcast-make">
                预约看马
              </span>
              <span class="broadcast-heart">
                <img src="../img/heart.jpeg" alt="">
              </section>
            </section>
            <section class="broadcast-cost">
              需要支付看马费用￥500.00元
            </section>
          </div>
          <div class="mation-peal">
            <section class="mation">
              <p>障碍赛</p>
              <span>{{ broadcast.obstacle }}</span>
              <span>米</span>
            </section>
            <section class="mation">
              <p>性别</p>
              <span>{{ broadcast.sex }}</span>
            </section>
            <section class="mation">
              <p>年龄</p>
              <span>{{ broadcast.age }}</span>
              <span>岁</span>
            </section>
            <section class="mation">
              <p>品种</p>
              <span>{{ broadcast.varieties}}</span>
            </section>
          </div>
        </div>
        <div class="brief"  id="brief-font">
            <section class="brief-font" >
              <h1>简介</h1>
              <p>{{ briefFont }}</p>
            </section>
            <!-- 页面切换部分 -->
            <div class="layui-tab">
              <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>能力档案</li>
                <li>练马档案</li>
                <li>赛事成绩</li>
                <li>血统证书</li>
              </ul>
              <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                  <section class="more-font" >
                    <p>名字/</p>
                    <span>{{broadcast.name}}</span>
                  </section>
                  <section class="more-font">
                    <p>性别/</p>
                    <span>母</span>
                  </section>
                  <section class="more-font">
                    <p>年龄/</p>
                    <span>{{parseInt(broadcast.age)}}</span>
                    <span>岁</span>
                  </section>
                  <section class="more-font">
                    <p>身高/</p>
                    <span>1.50</span>
                    <span>米</span>
                  </section>
                  <section class="more-font">
                    <p>品种/</p>
                    <span>蒙古马</span>
                  </section>
                  <section class="more-font">
                    <p>血统/</p>
                    <span>纯种马</span>
                  </section>
                  <section class="more-font">
                    <p>颜色/</p>
                    <span>白色</span>
                  </section>
                </div>
                <div class="layui-tab-item"></div>
                <div class="layui-tab-item"></div>
                <div class="layui-tab-item">
                  <figure class="match">

                  </figure>
                </div>
                <div class="layui-tab-item"></div>
              </div>
            </div>
            <div class="tation">
                <h1>体验报告</h1>
                <div class="layui-collapse" lay-filter="collapse">
                  <div class="layui-colla-item">
                      <h2 class="layui-colla-title">118项目马医体检</h2>
                    <div class="layui-colla-content layui-show">
                      <div class="physical-peal">
                        <section class="physical">
                          <img src="../img/pair.jpeg" alt="">
                          <span>体验报告</span>
                        </section>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <!-- 体态结构开始 -->
            <div class="structure">
              <h1>体态结构</h1>
              <div class="swiper-container swiper-container-horizontal" id="structure">
              	<div class="swiper-wrapper">
              		<div class="swiper-slide">
                    <img src="../img/horse.jpeg" alt="">
                  </div>
              		<div class="swiper-slide">
                  </div>
              		<div class="swiper-slide"></div>
              		<div class="swiper-slide"></div>
              	</div>
              	<div class="swiper-pagination case swiper-pagination-clickable swiper-pagination-bullets" id="pagination2">
                  <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1">前</span>
                  <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2">后</span>
                  <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3">左</span>
                  <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4">右</span>
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
              </div>
            </div>
            <!-- 体态结构结束 -->

            <!-- 买马结构图开始 -->
            <div class="briefs">
              <section class="diagram">
                <section>1</section>
                <span>找马</span>
                <span style="padding-left:65px;">></span>
                <p>
                  通过检索或马匹列表页找到您心仪的马匹；
                  <article class="">
                    在线了解马匹的各项信息。
                  </article>
                </p>
              </section>
              <section class="diagram">
                <section>2</section>
                <span>预约看马</span>
                <span>></span>
                <p>
                  对马感兴趣，在线提交看马信息或直接拨打热线预约看马；
                  支付看马费用（在线支付或线下支付）。
                </p>
              </section>
              <section class="diagram">
                <section>3</section>
                <span>线下看马</span>
                <span>></span>
                <p>
                  我们的工作人员将会联系您确定看马的时间和地点；
                  <article class="">
                    专业人员陪您看马，试马。
                  </article>
                </p>
              </section>
              <section class="diagram">
                <section>4</section>
                <span>线下交易</span>
                <span>></span>
                <p>
                  签署合同，支付定金。
                </p>
              </section>
              <section class="diagram">
                <section>5</section>
                <span>完成交易</span>
                <span>></span>
                <p>
                  支付全款，拥有属于您的好马。
                </p>
              </section>
            </div>
            <!-- 买马结构图结束 -->
            <!-- 常见问题 -->
            <div class="problem">
              <h1>常见问题</h1>
              <section class="problem-font">
                <p>1.如何看马？</p>
                <span>请参考交易流程</span>
              </section>
              <section class="problem-font">
                <p>2.因为时间原因可以改看马时间吗？</p>
                <span>可以的。请联系客服，我们将安排您合适的时间看马</span>
              </section>
              <section class="problem-font">
                <p>3.预约看马可取消吗？</p>
                <span>目前暂不支持取消，请见谅！</span>
              </section>
            </div>
            <!-- 常见问题结束 -->
            <div class="selected">
              <section class="selected-peal">
                <section class="selected-line"></section>
                <span>精选马匹</span>
                <section class="selected-line"></section>
              </section>
              <!-- 下面的轮播 -->

              <!-- 下面轮播图结束 -->
            </div>
      </div>
      <!-- 轮播图结束 -->

  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.3/js/swiper.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

var afterinfo = new Vue({
    el: '#brief-font',
    data: {
        briefFont: '这个是文字的',
        broadcast:{}
    }
  });

var info = new Vue({
    el: '#broadcast',
    data: {
      broadcast:{},
        api:{
          info:"http://mx34ya.natappfree.cc/horseapi/index.php/backend/horse",
        }
    },
    created:function(){
        this.getHorseInfo();
    },
    methods:{
      getHorseInfo:function(){
          // var self = this;
          //   axios.get(this.api.info).then(function(response){
          //         var data = response.data;
          //         self.broadcast = data.data;
          //         afterinfo.broadcast = data.data;
          //   }).then(function(response){
          //
          //   });
      }
    }
});

  //初始化layui的js
  layui.use('element', function(){
  var element = layui.element;
  var $ = layui.jquery;
    $(".bacl").css('height',664+parseInt($("[lay-filter='collapse']").height())+'px');
  element.on('tab(demo)', function(data){
  });

  element.on('collapse(collapse)',function(data){
        if(data.show == true){

          $(".bacl").css('height',664+parseInt($("[lay-filter='collapse']").height())+'px');
          return;
        }
        $(".bacl").css('height','696px');
  });
});
  // 轮播图
  layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#broadcast'
    ,width: '100%' //设置容器宽度
    ,height: '726px'
    ,arrow: 'always' //始终显示箭头
    ,anim: 'fade' //切换动画方式
    ,interval: 5000
    ,full: false
  });
});
// 下面的轮播图

// 马匹的体态特征
var swiper = new Swiper('#structure', {
      effect: 'fade',
      flipEffect: {
        slideShadows: false,
        limitRotation: false,
      },
      pagination: {
        el: '#pagination2',
        clickable: true,
          renderBullet: function (index, className) {
          switch(index){
          				default: text='';
          				case 0:text='前';break;
          				case 1:text='后';break;
          				case 2:text='左';break;
          				case 3:text='右';break;
          				}
          return '<span class="' + className + '" style="color:#fff;font-size:24px;font-weight：normal;font-family:AdobeHeitiStd-Regular;">' + text + '</span>';
        },
      },
    });
</script>
</html>
